<template>
  <div class="proxyLeasing">
    <div class="flex gap-50px pt-20px px-20px">
      <el-form label-width="auto">
        <el-form-item label="客户姓名">
          <el-autocomplete
            v-model="username"
            class="w-260px!"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入客户姓名"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-autocomplete
            v-model="phone"
            class="w-260px!"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入客户姓名"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="remark" class="w-260px!" placeholder="请输入备注" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <el-form label-width="auto">
        <el-form-item label="预订时间">
          <el-checkbox
            v-for="item in serviceTime"
            :key="item.startTime"
            v-model="item.check"
            :label="item"
            @change="selectTimeChange($event, item)"
            >{{ item.startTime }}-{{ item.endTime }}</el-checkbox
          >
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select class="w-260px!" v-model="payType" placeholder="请选择支付方式" />
        </el-form-item>
        <el-form-item label="费用">
          <el-input v-model="remark" class="w-260px!" placeholder="请输入费用" />
          <span class="ml-5px">元</span>
        </el-form-item>
      </el-form>
    </div>
    <div
      class="flex justify-center absolute bottom-0 w-[100%] pt-[20px] pb-[10px] border-t-[1px] border-solid border-[#e4e4e4]"
    >
      <el-button type="primary" class="px32">租赁</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CheckboxValueType } from 'element-plus'

defineOptions({ name: 'ProxyLeasing' })
// 查询相关
const username = ref('')
const phone = ref('')
const remark = ref('')
const querySearchAsync = (val: string, cb: (arg: any) => void) => {
  console.log(val, cb)
}
const handleSelect = item => {
  console.log(item)
}

const serviceTime = ref([
  {
    startTime: '10:00',
    endTime: '11:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '11:00',
    endTime: '12:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '12:00',
    endTime: '13:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '13:00',
    endTime: '14:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '13:00',
    endTime: '14:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '13:00',
    endTime: '14:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '13:00',
    endTime: '14:00',
    minutes: '60',
    check: false,
  },
  {
    startTime: '13:00',
    endTime: '14:00',
    minutes: '60',
    check: false,
  },
])
const selectTimeChange = (val: CheckboxValueType, item: any) => {
  console.log(val)
}

const payType = ref('')
</script>

<style scoped lang="scss">
.proxyLeasing {
  min-height: 100%;
}
</style>
